<template>
  <div class="albums ">
    <ul>
      <li v-for="(al,index) in Album"
          :key="index">
        <div class="left">
          <img v-lazy="al.blurPicUrl"
               class="img-60 "
               style=" border: 1px solid #e7e7e7;">
          <img src="@/assets/cipan.png"
               class="cipan img-60">
          <span>{{al.name}}</span>
          <span class="two"
                v-for="at in al.transNames"
                :key="at.id">({{at }})</span>
        </div>
        <div class="right">
          <span>{{al.artist.name}}</span>
          <span class="two"
                v-show="al.artist.alias[0]">({{ al.artist.alias[0] }})</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    Album: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  methods: {
    toPath (id) {
      console.log(id)
      // this.$router.push({ path: 'homeitem/:id', query: { id } })
    }
  }
}
</script>

<style scoped lang="less">
.albums {
  ul {
    width: 100%;
    float: left;
    li {
      position: relative;
      height: 80px;
      margin-bottom: 20px;
      &:hover {
        background-color: rgb(244, 243, 243);
        cursor: pointer;
      }
      span {
        display: inline-block;
        font-size: 14px;
        max-width: 190px;
        white-space: nowrap; /*不换行强制文本在一行显示*/
        overflow: hidden; /*超出盒子宽度部分文字被隐藏*/
        text-overflow: ellipsis; /*当文本溢出包含元素时发生的事情 ellipsis*/
        margin-left: 120px;
        line-height: 80px;
      }
      .two {
        margin-left: 5px;
        color: #666;
        font-size: 13px;
      }
      .left {
        float: left;
        .img-60 {
          vertical-align: middle;
          position: absolute;
          z-index: 2;
          margin-left: 30px;
          width: 60px;
          height: 60px;
          margin-top: 10px;
          border-radius: 5px;
        }
        .cipan {
          position: absolute;
          left: 13px;
          z-index: 1;
        }
      }
      .right {
        position: absolute;
        left: 600px;
        float: left;
      }
    }
  }
}
</style>